<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }

        /* logo */
        #logo{
            width: 100%;
            background: url("https://it.ctgu.edu.cn/images/t1.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }
        #aline_main_part{
            width: 1200px;
            /* border: 1px solid black; */
            position: relative;
            left: 360px;
            overflow: hidden;
        }
        #logo_part{
            float: left;
            width: 625px;
            height: 140px;
            padding-left: 20px;
        }
        #logo_part > img{
            position: relative;
            top: 25%;
        }
        #serch_part{
            float: right;
            height: 140px;
            width: 400px;
            position: relative;
            padding-right: 20px;
        }
        #serch_unit{
            position: relative;
            top: 40%;
            left: 35%;
        }
        #serch_box{
            height: 32px;
            width: 200px;
            padding: 0;
            margin: 0;
        }
        #serch_button{
            height: 36px;
        }

        /* 导航栏 */
        #catalogue{
            height: 63px;
            width: 1200px;
            position: absolute;
            left:360px;
            text-align: center;
        }
        #cata_title{
            width: 1200px;
            text-align: center;
            position: absolute;
            left: 360px;
            font-size: 15px;
        }
        .cata{
            float: left;
            height: 63px;
            width: 9%;
            text-align: center;
            padding-top: 17px;
            z-index: 1;
        }
        ul{
            list-style: none;
            display: none;
            text-align: center;
            background-color: #0b62c1;
            width: 108px;
            margin: 0;
            padding: 0;
            margin-top: 50px;
            line-height: 2.2;
        }
        #gen_ul{
            display: none;
            position: absolute;
            left:108px;
        }
        #news_ul{
            display: none;
            position: absolute;
            left:216px;
        }
        #teac_ul{
            display: none;
            position: absolute;
            left:324px;
        }
        #under_ul{
            display: none;
            position: absolute;
            left:432px;
        }
        #post_ul{
            display: none;
            position: absolute;
            left:540px;
        }
        #cons_ul{
            display: none;
            position: absolute;
            left:648px;
        }
        #reserch_ul{
            display: none;
            position: absolute;
            left:756px;
        }
        #party_ul{
            display: none;
            position: absolute;
            left:864px;
        }
        #stu_ul{
            display: none;
            position: absolute;
            left:972px;
        }
        #worker_ul{
            display: none;
            position: absolute;
            left:1080px;
            width: 104px;
        }
        #worker_house{
            width: 104px;
        }
        #cata_title li:hover{
            background-color: #3ea2ed;
            color:#fff;
        }
        
        /* 主页图片 */
        #images{
            margin-top: 63px;
            width: 1200px;
            padding-left: 360px;
        }
        #images > img{
            padding: o;
            margin: 0;
            z-index: 100;
        }

        /* 填充用内容 */
        #main_body{
            height: 1000px;
            overflow: hidden;
            display: flex;
            width: 100%;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        #main_body::before{
            content: '';
            position: absolute;
            bottom:0px;
            width: 100%;
            height: 80px;
            background: linear-gradient(to top,#005a99,transparent);
        }
        #main_body::after{
            content: '';
            position: absolute;
            top:0px;
            width: 100%;
            height: 80px;
            background: linear-gradient(to top,transparent,#fff);
        }
        #star{
            object-fit: cover;
            /* object-fit 裁剪图片 */
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        /* 底栏 */
        #copyright{
            background-color: #005a99;
            padding: 10px;
        }
        p{
            margin: 0;
            padding: 0;
            text-align: center;
            font-size: 14px;
            color: #fff;
        }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
</head>
<body>
    <div id="logo">
        <div id="aline_main_part">
            <div id="logo_part">
                <img id="iconfont" src="https://it.ctgu.edu.cn/images/Iconfont.png" alt="">
            </div>
            <div id="serch_part">
                <div id="serch_unit">
                    <input id="serch_box" type="text" placeholder="     请输入关键字">
                    <input id="serch_button" type="button" value="搜索">
                </div>
                
            </div>
        </div>       
    </div>

    <div id="catalogue">
        <!-- 导航栏第一行 -->
        <div class="cata" id="idx">首页</div>
        <div class="cata" id="general">学院概况</div>
        <div class="cata" id="news">学院动态</div>
        <div class="cata" id="teachers">师资队伍</div>
        <div class="cata" id="undergraduate">本科生培养</div>
        <div class="cata" id="postgraduate">研究生培养</div>
        <div class="cata" id="construct">学科建设</div>
        <div class="cata" id="reserch">科学研究</div>
        <div class="cata" id="party_cons">党建工作</div>
        <div class="cata" id="student_cons">学生工作</div>
        <div class="cata" id="worker_house">教工之家</div>
    </div>

    <div>
        <table id="cata_title">
            <!-- 导航栏第二行，为隐藏行，显示二级菜单 -->
            <tr>
                <!-- 首页无下拉菜单 -->
                <td></td>
                <!-- 学院概况之后都有下拉菜单 -->
                <td>
                    <ul id="gen_ul">
                        <li>学院介绍</li>
                        <li>学院领导</li>
                        <li>机构设置</li>
                        <li>发展规划</li>
                        <li>宣传视频</li>
                    </ul>
                </td>
                <td>
                    <ul id="news_ul">
                        <li>学院动态</li>
                        <li>通知公告</li>
                        <li>行业新闻</li>
                        <li>视频新闻</li>
                    </ul>
                </td>
                <td>
                    <ul id="teac_ul">
                        <li>师资概况</li>
                        <li>教师列表</li>
                    </ul>
                </td>
                <td>
                    <ul id="under_ul">
                        <li>部门概况</li>
                        <li>考试专栏</li>
                        <li>专业介绍</li>
                        <li>实践教学</li>
                        <li>文件下载</li>
                        <li>本科教务</li>
                        <li>留学生教务</li>
                    </ul>
                </td>
                <td>
                    <ul id="post_ul">
                        <li>部门概况</li>
                        <li>最新公告</li>
                        <li>学位点简介</li>
                        <li>招生信息</li>
                        <li>教师风采</li>
                        <li>培养方案</li>
                        <li>教学大纲</li>
                        <li>培养管理</li>
                        <li>学位管理</li>
                        <li>文件下载</li>
                        <li>本科教务</li>
                        <li>研究生教务</li>
                    </ul>
                </td>
                <td>
                    <ul id="cons_ul">
                        <li>学术动态</li>
                        <li>重点学科</li>
                        <li>基地建设</li>
                        <li>学术团队</li>
                        <li>学位点建议</li>
                    </ul>
                </td>
                <td>
                    <ul id="reserch_ul">
                        <li>部门概况</li>
                        <li>研究方向</li>
                        <li>最新公告</li>
                        <li>科研政策</li>
                        <li>科研项目</li>
                        <li>科研成果</li>
                    </ul>
                </td>
                <td>
                    <ul id="party_ul">
                        <li>部门概况</li>
                        <li>党建动态</li>
                        <li>组织机构</li>
                        <li>支部建设</li>
                        <li>党员风采</li>
                        <li>学习资料</li>
                        <li>党校培训</li>
                        <li>表格下载</li>
                        <li>党风廉政</li>
                        <li>创先争优</li>
                    </ul>
                </td>
                <td>
                    <ul id="stu_ul">
                        <li>学工概况</li>
                        <li>学工动态</li>
                        <li>招生动态</li>
                    </ul>
                </td>
                <td>
                    <ul id="worker_ul">
                        <li>工会概况</li>
                        <li>工会活动</li>
                    </ul>
                </td>
            </tr>
        </table>
    </div>

    <div id="images">
        <img id="rolling_img" src="https://it.ctgu.edu.cn/images/ban1.png" alt="">
        <img id="img2" src="https://it.ctgu.edu.cn/images/ban2.png" alt="" style="display: none;">
        <img id="img3" src="https://it.ctgu.edu.cn/images/ban3.png" alt="" style="display: none;">
    </div>

    <div id="main_body">
        <img id="star" src="https://s3.bmp.ovh/imgs/2022/04/14/f4363b73ce1cdce2.jpg" alt="">
    </div>

    <div id="copyright">
        <p>CopyRights&nbsp;©2007-2008&nbsp;All&nbsp;Rights&nbsp;Reserved&nbsp;三峡大学计算机与信息学院</p>
        <p>电&nbsp;话：(0717)6393156&nbsp;&nbsp;&nbsp;&nbsp;邮 编：443002</p>  
        <p>地&nbsp;址：湖北省宜昌市大学路8号&nbsp;&nbsp;电子邮件：jsjyb@ctgu.edu.cn</p>
    </div>

    <script>
        $(function(){
            // 单图片元素进行切换，重置index前不手动设置图片源为第一张图的时候最后一张图片切换到第一张图片用时比计时器的设定时间肉眼可见的更长
            // 手动初始化图片源之后，最后一张图到第一张图以及第一二张图之间的切换时间比设定时间长
            let img_arry=['https://it.ctgu.edu.cn/images/ban1.png','https://it.ctgu.edu.cn/images/ban2.png','https://it.ctgu.edu.cn/images/ban3.png'];
            let index = 0;
            let time;
            clearInterval(time);
            time = setInterval(function(){
                if(index > img_arry.length){
                    $('#rolling_img').attr('src','https://it.ctgu.edu.cn/images/ban1.png')
                    index = 0;
                }else{
                    $('#rolling_img').attr('src',img_arry[index])
                    index++;
                }
            },800)

            // 多图片元素设置display进行切换，只显示第一张图片
            // let flag = 0;
            // let time;
            // let id_array = ['#rolling_img','#img2','#img3'];
            // clearInterval(time);
            // time = setInterval(function(){
            //     $(id_array[flag]).css('display','none');
            //     flag++;
            //     if(flag > id_array.length){flag = 0;}
            //     $(id_array[flag]),css('display','block');
            // },3000)

            // 二级菜单触发
            // 语句a,b都写，存在语句1，2，4：和存在语句1,4类似，鼠标移动到一级菜单时二级菜单出现，二级菜单的hover正常显示，
            // 但只有从二级菜单移出鼠标时二级菜单才会正常消失，从一级菜单移出会导致二级菜单仍然存在。
            // 语句a,b都写，存在语句1，3，4：和存在语句1,3一样，鼠标移出一级菜单时二级菜单就会消失，二级菜单的hover无法显示。
            // a,b,1,2,3,4都写，移入一级菜单显示二级菜单，从一级和二级移出时二级菜单都会正常消失。
            $('#general').mouseenter(function(){
                $('#gen_ul').css('display','block');//语句a
                $('#general').css('background-color','#0b62c1').css('color','#fff');//语句b
            });// 语句1
            $('#gen_ul').mouseenter(function(){
                $('#gen_ul').css('display','block');
                $('#general').css('background-color','#0b62c1').css('color','#fff');
            });// 语句2
            $('#general').mouseleave(function(){
                $('#gen_ul').css('display','none');
                $('#general').css('background-color','').css('color','black');
            });// 语句3
            $('#gen_ul').mouseleave(function(){
                $('#gen_ul').css('display','none');
                $('#general').css('background-color','').css('color','black');
            });// 语句4

            $('#news').mouseenter(function(){
                $('#news_ul').css('display','block');//语句a
                $('#news').css('background-color','#0b62c1').css('color','#fff');//语句b
            });// 语句1
            $('#news_ul').mouseenter(function(){
                $('#news_ul').css('display','block');
                $('#news').css('background-color','#0b62c1').css('color','#fff');
            });// 语句2
            $('#news').mouseleave(function(){
                $('#news_ul').css('display','none');
                $('#news').css('background-color','').css('color','black');
            });// 语句3
            $('#news_ul').mouseleave(function(){
                $('#news_ul').css('display','none');
                $('#news').css('background-color','').css('color','black');
            });// 语句4
            
            $('#teachers').mouseenter(function(){
                $('#teac_ul').css('display','block');//语句a
                $('#teachers').css('background-color','#0b62c1').css('color','#fff');//语句b
            });// 语句1
            $('#teac_ul').mouseenter(function(){
                $('#teac_ul').css('display','block');
                $('#teachers').css('background-color','#0b62c1').css('color','#fff');
            });// 语句2
            $('#teachers').mouseleave(function(){
                $('#teac_ul').css('display','none');
                $('#teachers').css('background-color','').css('color','black');
            });// 语句3
            $('#teac_ul').mouseleave(function(){
                $('#teac_ul').css('display','none');
                $('#teachers').css('background-color','').css('color','black');
            });// 语句4

            $('#undergraduate').mouseenter(function(){
                $('#under_ul').css('display','block');//语句a
                $('#undergraduate').css('background-color','#0b62c1').css('color','#fff');//语句b
            });// 语句1
            $('#under_ul').mouseenter(function(){
                $('#under_ul').css('display','block');
                $('#undergraduate').css('background-color','#0b62c1').css('color','#fff');
            });// 语句2
            $('#undergraduate').mouseleave(function(){
                $('#under_ul').css('display','none');
                $('#undergraduate').css('background-color','').css('color','black');
            });// 语句3
            $('#under_ul').mouseleave(function(){
                $('#under_ul').css('display','none');
                $('#undergraduate').css('background-color','').css('color','black');
            });// 语句4

            $('#postgraduate').mouseenter(function(){
                $('#post_ul').css('display','block');//语句a
                $('#postgraduate').css('background-color','#0b62c1').css('color','#fff');//语句b
            });// 语句1
            $('#post_ul').mouseenter(function(){
                $('#post_ul').css('display','block');
                $('#postgraduate').css('background-color','#0b62c1').css('color','#fff');
            });// 语句2
            $('#postgraduate').mouseleave(function(){
                $('#post_ul').css('display','none');
                $('#postgraduate').css('background-color','').css('color','black');
            });// 语句3
            $('#post_ul').mouseleave(function(){
                $('#post_ul').css('display','none');
                $('#postgraduate').css('background-color','').css('color','black');
            });// 语句4
            

            $('#construct').mouseenter(function(){
                $('#cons_ul').css('display','block');//语句a
                $('#construct').css('background-color','#0b62c1').css('color','#fff');//语句b
            });// 语句1
            $('#cons_ul').mouseenter(function(){
                $('#cons_ul').css('display','block');
                $('#construct').css('background-color','#0b62c1').css('color','#fff');
            });// 语句2
            $('#construct').mouseleave(function(){
                $('#cons_ul').css('display','none');
                $('#construct').css('background-color','').css('color','black');
            });// 语句3
            $('#cons_ul').mouseleave(function(){
                $('#cons_ul').css('display','none');
                $('#construct').css('background-color','').css('color','black');
            });// 语句4
            
            $('#reserch').mouseenter(function(){
                $('#reserch_ul').css('display','block');//语句a
                $('#reserch').css('background-color','#0b62c1').css('color','#fff');//语句b
            });// 语句1
            $('#reserch_ul').mouseenter(function(){
                $('#reserch_ul').css('display','block');
                $('#reserch').css('background-color','#0b62c1').css('color','#fff');
            });// 语句2
            $('#reserch').mouseleave(function(){
                $('#reserch_ul').css('display','none');
                $('#reserch').css('background-color','').css('color','black');
            });// 语句3
            $('#reserch_ul').mouseleave(function(){
                $('#reserch_ul').css('display','none');
                $('#reserch').css('background-color','').css('color','black');
            });// 语句4
            
            $('#party_cons').mouseenter(function(){
                $('#party_ul').css('display','block');//语句a
                $('#party_cons').css('background-color','#0b62c1').css('color','#fff');//语句b
            });// 语句1
            $('#party_ul').mouseenter(function(){
                $('#party_ul').css('display','block');
                $('#party_cons').css('background-color','#0b62c1').css('color','#fff');
            });// 语句2
            $('#party_cons').mouseleave(function(){
                $('#party_ul').css('display','none');
                $('#party_cons').css('background-color','').css('color','black');
            });// 语句3
            $('#party_ul').mouseleave(function(){
                $('#party_ul').css('display','none');
                $('#party_cons').css('background-color','').css('color','black');
            });// 语句4
            
            $('#student_cons').mouseenter(function(){
                $('#stu_ul').css('display','block');//语句a
                $('#student_cons').css('background-color','#0b62c1').css('color','#fff');//语句b
            });// 语句1
            $('#stu_ul').mouseenter(function(){
                $('#stu_ul').css('display','block');
                $('#student_cons').css('background-color','#0b62c1').css('color','#fff');
            });// 语句2
            $('#student_cons').mouseleave(function(){
                $('#stu_ul').css('display','none');
                $('#student_cons').css('background-color','').css('color','black');
            });// 语句3
            $('#stu_ul').mouseleave(function(){
                $('#stu_ul').css('display','none');
                $('#student_cons').css('background-color','').css('color','black');
            });// 语句4
            
            $('#worker_house').mouseenter(function(){
                $('#worker_ul').css('display','block');//语句a
                $('#worker_house').css('background-color','#0b62c1').css('color','#fff');//语句b
            });// 语句1
            $('#worker_ul').mouseenter(function(){
                $('#worker_ul').css('display','block');
                $('#worker_house').css('background-color','#0b62c1').css('color','#fff');
            });// 语句2
            $('#worker_house').mouseleave(function(){
                $('#worker_ul').css('display','none');
                $('#worker_house').css('background-color','').css('color','black');
            });// 语句3
            $('#worker_ul').mouseleave(function(){
                $('#worker_ul').css('display','none');
                $('#worker_house').css('background-color','').css('color','black');
            });// 语句4
            
            $('#idx').mouseenter(function(){
                $('#idx').css('background-color','#0b62c1').css('color','#fff');
            })
            $('#idx').mouseleave(function(){
                $('#idx').css('background-color','').css('color','black');
            })

        })
    </script>
</body>
</html>


